<template>
	<section class="main">
		<h3 class="nametitle">{{title}}</h3>
		<h4 class="title">服务流程</h4>
		<div class="step"><img src="../../assets/step.png"/></div>
    <div class="searchlist pcTime">
      <ul>
        <li class="form-group ">
          <label class="control-label">时间：</label>
          <div class="control-box">
            <el-date-picker v-model="searchTime"  unlink-panels
                            :picker-options="pickerOptions2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">>
            </el-date-picker>
          </div>
        </li>
        <button type="button" class="button-primary" @click="search()">搜索</button>
      </ul>
    </div>
    <div class="searchlist mobile_time">
      <ul>
        <li>
          <label class="control-label">开始时间：</label>
          <div class="control-box">
            <div class="el-date-editor el-add-box">
              <i class="el-input__icon el-range__icon el-icon-date"></i>
              <input type="text" class="text" readonly v-model="mobileSearchTime.searchTime2" placeholder="开始时间" @click="changeMobile1"/>
              <calendar
                v-model="mobileSearchTime.calendarShow"
                @change="handelChange">
              </calendar>
            </div>
          </div>
        </li>
        <li>
          <label class="control-label">结束时间：</label>
          <div class="control-box">
            <div class="el-date-editor el-add-box">
              <i class="el-input__icon el-range__icon el-icon-date"></i>
              <input type="text" class="text" readonly v-model="mobileSearchTime2.searchTime2" placeholder="结束时间"  @click="changeMobile2"/>
              <calendar
                v-model="mobileSearchTime2.calendarShow"
                @change="handelChange2">
              </calendar>
            </div>
          </div>
        </li>
      </ul>
      <button type="button" class="button-primary" @click="search()">搜索</button>
    </div>
		<aside class="main_table">
			<table class="table" border="1" bordercolor="#e5e5e5">
				<thead>
					<tr>
						<th width="7.7%" class="notclick">序号</th>
						<th width="11.8%"  @click="sort('internalNumber','1')" :class="sortClass=='1' ? 'addSorc' : (sortClass=='1_1' ? 'subSorc' : '')">内部案号</th>
						<th width="13%"  @click="sort('patentName','2')" :class="sortClass=='2' ? 'addSorc' : (sortClass=='2_1' ? 'subSorc' : '')">专利名称</th>
            <th width="9%" @click="sort('patentTypeName','8')" :class="sortClass=='8' ? 'addSorc' : (sortClass=='8_1' ? 'subSorc' : '')">类型</th>
						<th width="9.8%"  @click="sort('applyNum','3')" :class="sortClass=='3' ? 'addSorc' : (sortClass=='3_1' ? 'subSorc' : '')">申请号</th>
						<th width="12.3%" @click="sort('applyDate','4')" :class="sortClass=='4' ? 'addSorc' : (sortClass=='4_1' ? 'subSorc' : '')">申请日期</th>
						<th width="12%" @click="sort('applyUserName','5')" :class="sortClass=='5' ? 'addSorc' : (sortClass=='5_1' ? 'subSorc' : '')">申请人</th>
						<th width="13%" @click="sort('inventor','6')" :class="sortClass=='6' ? 'addSorc' : (sortClass=='6_1' ? 'subSorc' : '')">发明人</th>
						<th width="11.4%" @click="sort('progressName','7')" :class="sortClass=='7' ? 'addSorc' : (sortClass=='7_1' ? 'subSorc' : '')">目前进度</th>
					</tr>
				</thead>
				<tbody v-if="tableDate && tableDate.length>0">
					<tr v-for="(item,index) in tableDate" @click="toDetail(item.id)">
						<td>{{(pageSize*(pageNumber-1))+(index+1)}}</td>
						<td>{{item.internalNumber}}</td>
						<td>{{item.patentName}}</td>
            <td>{{item.patentTypeName}}</td>
						<td>{{item.applyNum}}</td>
						<td>{{item.applyDate | formatDate}}</td>
						<td>{{item.applyUserName}}</td>
						<td>{{item.inventor}}</td>
						<td>{{item.progressName}}</td>
					</tr>
				</tbody>
				<tbody v-else>
					<tr>
						<td colspan="9" class="textleft">暂无数据</td>
					</tr>
				</tbody>
			</table>
		</aside>
		<div v-show="allPageSize>1">
			<mo-pages :page-index="pageNumber" :total="total" :page-size="pageSize" @change="pageChange"></mo-pages>
		</div>
	</section>
</template>

<script>
	import moPages from "@/components/pages"
	export default{
		components:{
			moPages:moPages
		},
		data (){
			return {
				title:"已申报专利信息",
				status:0,//表示已申报
				pageNumber:1,
				pageSize:10,
				total:'',//总的条数
				tableDate:[],
				allPageSize:'',
        searchTime:'',
        mobileSearchTime:{
          searchTime2:"",
          calendarShow:false,
        },
        mobileSearchTime2:{
          searchTime2:"",
          calendarShow:false,
        },
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        sortOrder:'asc',
        sortName:'internalNumber',
        sortClass:"1",
			}

		},
    filters:{
      formatDate:function(value){
        if(value!=null && value!=''){
          if(value.indexOf(' ')!=-1){
            value=value.split(" ")[0];
          }
        }
        return value;
      }
    },
		created(){
			this.setTitle();
			this.setActive();
			this.getList();
		},
		methods:{
			setTitle(){
				//设置上面的标题
				this.$emit("getTitle",this.title);
			},
			setActive(){
				//设置左侧的菜单高亮
				this.$root.Bus.$emit("nowActive","04")
			},
			toDetail(number){
				this.$router.push({path:"declareDetail",query:{id:number}})
			},
			getList(startTime,endTime){
        if(!startTime) startTime='';
        if(!endTime)  endTime='';
				this.$ajax.get(this.global.url+"/api/user/patentinfolist?pageNumber="+this.pageNumber+"&pageSize="+this.pageSize+"&status="+this.status+"&startTime="+startTime+"&endTime="+endTime+"&sortname="+this.sortName+"&sortOrder="+this.sortOrder).then(res=>{
					let data=res.data;
					this.tableDate=[];
					if(data.code=="200"){
						if(data.data && data.data.records){
							this.tableDate=data.data.records;
						}
						this.total=data.data.total;
						this.allPageSize=data.data.pages;
					}
					else{
						this.total=0;
					}
				}).catch(error=>{
					console.log(error)
				})
			},
			pageChange(page){
				this.pageNumber=page;
        if($(".mobile_time").is(":visible")){
          this.getList(this.mobileSearchTime.searchTime2,this.mobileSearchTime2.searchTime2);
        }
        else{
          if(this.searchTime!=''){
            this.getList(this.searchTime[0],this.searchTime[1]);
          }else{
            this.getList();
          }
        }
			},
      search(){
        this.pageNumber=1;
        if($(".mobile_time").is(":visible")){
          this.getList(this.mobileSearchTime.searchTime2,this.mobileSearchTime2.searchTime2);
        }
        else{
          if(this.searchTime!=''){
            this.getList(this.searchTime[0],this.searchTime[1]);
          }else{
            this.getList();
          }
        }
      },
      handelChange(data,formatDate){
        this.mobileSearchTime.searchTime2=formatDate;

      },
      handelChange2(data,formatDate){
        this.mobileSearchTime2.searchTime2=formatDate;
      },
      changeMobile1(){
        this.mobileSearchTime.calendarShow=true;
      },
      changeMobile2(){
        this.mobileSearchTime2.calendarShow=true;
      },
      sort(sortname,num){
        console.log(sortname);
        if(this.sortName==sortname){
          if(this.sortOrder=='asc'){
            this.sortOrder='desc';
            this.sortClass=num+'_1';
          }
          else{
            this.sortOrder='asc';
            this.sortClass=num;
          }
        }
        else{
          this.sortName=sortname;
          this.sortOrder='asc';
          this.sortClass=num;
        }
        if($(".mobile_time").is(":visible")){
          this.getList(this.mobileSearchTime.searchTime2,this.mobileSearchTime2.searchTime2);
        }
        else{
          if(this.searchTime!=''){
            this.getList(this.searchTime[0],this.searchTime[1]);
          }else{
            this.getList();
          }
        }

      }
		}
	}
</script>

<style scoped>
	.main{
		padding:1.5rem 7% 1.5rem 7%;
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}
	.main .title{
		font-size:1rem;
		line-height: 30px;
		text-align: center;
		color:#53306c;
		margin-bottom:2.4rem;
	}
	.step{
		width:100%;
		margin-bottom: 2.1rem;
	}
	.step img{
		width:100%;
	}
	.main_table{
		width:100%;
		overflow: auto;
		margin-bottom:1rem;
	}
	.table{
		width:100%;
		min-width:1000px;
		text-align:center;
		border-collapse:collapse;
		border-spacing:0;
		background: #fff;
		font-size: 14px;
	}
	.table thead th{
    background-color: #53306c;
		color:#fff;
		padding:0.75rem 1rem;
		line-height: 22px;
		font-weight: normal;
    cursor: pointer;
    background-position: 95% center;
    background-repeat: no-repeat;
		/*height: 64px;*/
	}
  .table thead th.notclick{
    cursor: default;
  }
  .table thead .addSorc{
    /*background: url("../../assets/asc.png") no-repeat 95% center;*/
    background-image:url("../../assets/asc.png");
    background-size:32px auto;
  }
  .table thead .subSorc{
    background-image:url("../../assets/desc.png");
    background-size:32px auto;
  }
	.table tbody tr{
		cursor: pointer;
	}
	.table tbody td{
		color:#333333;
		/*height: 64px;*/
		padding:0.75rem 1rem;
		line-height: 22px;
    word-break:break-all;
	}
	.nametitle{
		font-size: 1.5rem;
		color:#53306c;
		text-align: center;
		line-height: 2.5rem;
		margin-bottom: 1.5rem;
		margin-top:1.5rem;
		display: none;
	}
  /*2018-12-17新添加样式 start*/
  .searchlist{
    margin-bottom: 0.5rem;
  }
  .searchlist ul{
    overflow: hidden;
    width:100%;
  }
  .searchlist li{
    /*width:25%;*/
    overflow: hidden;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: row;
    float: left;
    margin-right: 0.5rem;
  }
  .searchlist li .control-label{
    margin-right: 10px;
  }
  .searchlist li .control-box{
    -webkit-flex:1;
    -moz-flex:1;
    -ms-flex:1;
    -o-flex:1;
    flex:1;
  }
  .searchlist .button-primary{
    font-size: 0.7rem;
    color: #fff;
    background: #53306c;
    padding: 0 1rem;
    border: none;
    border-radius: 4px;
    line-height: 2rem;
    height: 2rem;
    overflow: hidden;
    margin-top: 3px;
    margin-bottom: 3px;
    cursor: pointer;
  }
  .searchlist .button-primary:focus{
    border: none;
    outline: none;
  }
  .el-add-box{
    background: #fff;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 3px 10px;
    position: initial !important;
    width:100%;
  }
  .el-add-box input{
    height:1.6rem;
    line-height: 1.6rem;
    font-size: 0.7rem;
    text-align: center;
    border: none;
    padding:0px;
    margin:0px;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    flex:1;
  }

  .control-box >>> .el-date-editor .el-range-separator{
    width:auto !important;
  }
  .mobile_time{
    display: none;
  }
  .mobile_time li{
    width:100%;
    float: none;
    margin-bottom: 15px;
  }
  .mobile_time .button-primary{
    display: block;
    margin: 0 auto;
  }


	@media only screen and (min-width:960px) and (max-width:1440px){
		.main{
			padding:1.5rem 2rem;
		}
	}
	@media only screen and (min-width: 320px) and (max-width: 959px) {
		.main{
			padding: 0px 1.5rem 1.5rem 1.5rem;
		}
		.nametitle{
			display: block;
		}

	}
  /*2018-12-17新添加样式 end*/
  @media only screen and (min-width:960px) and (max-width:1440px){
    .main{
      padding:1.5rem 2rem;
    }
  }
  @media only screen and (min-width: 320px) and (max-width: 959px) {
    .main {
      padding: 0px 1.5rem 1.5rem 1.5rem;
    }

    .nametitle {
      display: block;
    }

    /*2018-12-17新添加样式 end*/
    @media only screen and (min-width: 960px) and (max-width: 1440px) {
      .main {
        padding: 1.5rem 2rem;
      }
    }
    @media only screen and (min-width: 320px) and (max-width: 959px) {
      .main {
        padding: 0px 1.5rem 1.5rem 1.5rem;
      }

      .nametitle {
        display: block;
      }

      /*2018-12-17新添加样式 start*/
      .mobile_time {
        display: block;
      }

      .pcTime {
        display: none;
      }
      .table tbody .textleft{
        text-align: left;
      }
      /*2018-12-17新添加样式 end*/
    }
  }
</style>
